@import "reset";
#tools,#header,#banner,#service,#footer{
    width:1200px;
    margin:0 auto;
}
/*--------------顶部工具栏---------------*/
#toolsbox{
    height:30px;
    background:#f7f9f8;
}
#tools{
    height:30px;
    line-height:30px;
}
#tools span{
    float: left;
}

#tools i{
    display:inline-block;
    vertical-align: center;
    height:0;
    width:0;
    margin-left:4px;
    border-top:4px solid #008842;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:2px solid transparent;
}
#tools #myyi:hover,#tools #phone:hover{
    background:#fff;
    padding:0 9px;
    border-left:1px solid #b4c1a3;
    border-right:1px solid #b4c1a3;
    i{
        transform-origin:4px 2px;
        transition: all 0.5s;
        transform:rotate(180deg);
    }
    ul{
        display:block;
    }
}
#tools #myyi:hover:after{
    content: " ";
    height:2px;width:100%;
    background:#fff;
    position:absolute;
    left:0;
    top:30px;
    z-index:400;
}
#tools #phone:hover:after{
    content: " ";
    height:2px;width:100%;
    background:#fff;
    position:absolute;
    left:0;
    top:30px;
    z-index:400;
}
#tools #myyi,#tools #phone{
    position:relative;
    ul{
        position:absolute;
        top:30px;
        left:-1px;
        z-index:250;
        background:#fff;
        border:1px solid #b4c1a3;
        padding:15px 0  10px 0;
        display:none;
        li{
            line-height:24px;
            float:none;
            p{
                line-height:24px;
                text-align: center;
                margin-bottom:6px;
            }
        }
    }
}
#tools #myyi ul{
    width:124px;
    height:185px;
    padding:5px 0;
    li{
        height:25px;
    }
}
#tools>ul{
    float:right;
}
#tools ul li{
    float:left;
    padding:0 10px;
}
#tools ul li a{
    color:#000;
}
#tools ul li a:hover{
    color:#008842;
}
#tools ul b{
    display:inline-block;
    vertical-align:top;
    height:18px;
    width:22px;
    margin-top:6px;
    background:url(../img/header-img.png) no-repeat;
}
#tools ul li:nth-of-type(3) b{
    background-position:-40px 0;
}
#tools ul li:nth-of-type(4) b{
    background-position:-64px 0;
}
#tools ul li:nth-of-type(5) b{
    width:25px;
    background-position:-147px 0;
}
#tools ul li:nth-of-type(6) b{
    background-position:-86px 0;
}
/*--------------header---------------*/
#headerbox{
    background:#e0e0e0;
    width:100%;
    overflow: hidden;
    z-index:10000;
}
#header{
    height:63px;
    padding-top:15px;
    h1{
        float:left;
        margin:0 145px 0 0px;
        transform-origin: 0 0;
    }
    h2{
        float:right;
        font-size:12px;
        height:12px;
        line-height:12px;
        height:35px;
        span{
            text-align:center;
            display:inline-block;
            width:120px;
            position:relative;
            i{
                height:36px;
                width:36px;
                position:absolute; 
                top:20px;
                left:42px;
                background:url(../img/shop-step.png) no-repeat;
                
            }
        }
        span:nth-of-type(3) i{
            background-position:-84px 0;
        }
        span:nth-of-type(2){
            i{
                background-position:-42px 0;
            }
            margin:0 80px;
        }
        .stepnow{
            color:#008842;
            i{
                background-position-y: -44px;
            }
        }
    }
    h3{
        width:400px;
        height:6px;
        border:1px solid #e5e5e5;
        background:#fff;
        float:right;
        margin-right:58px;
    }
}
/*--------------content---------------*/
#contentbox{
    width:100%;
    background:#f7f8f8;
    padding:20px 0 50px 0;
    #content{
        width:1198px;
        min-height:420px;
        border:1px solid #e3e6e0;
        background:#fff;
        margin:0 auto;
        #empty{
            width:100%;
            text-align:center;
            margin-top:78px;
            font-size:14px;
            line-height:14px;
            display:none;
            a{
                color:#008842;
                padding-left:20px;
            }
        }
        h1 > a{
            float:right;
            margin-right:20px;
            color:#008842;
            text-decoration: underline;
        }
        h1{
            font-size:12px;
            height:38px;
            line-height:38px;
            border-bottom:2px solid #05984d;
            span{
                float:left;
                color:#444444;
            }
            span:nth-of-type(1){
                display:inline-block;
                width:218px;
                height:38px;
                background:url(../img/bg_cart.png) no-repeat;
            }
            span:nth-of-type(2){
                padding:0 0px 0 18px;
            }
            span:nth-of-type(3){
                position:relative;
                padding:2px 3px 8px 3px;
                margin-top:11px;
                line-height:1em;
            }
            #citylist{
                width:483px;
                padding-bottom:15px;
                border:1px solid #007f4d;
                background:#fff;
                z-index:400;
                position: absolute;
                left:-48px;
                top:23px;
                display:none;
                h3{
                    height: 30px;
                    width:448px;
                    padding:0 20px 0 15px;
                    color:#727272;
                    font-size:12px;
                    background:#ededed;
                    line-height:30px;
                    float:left;
                    a{
                        float:right;
                        color:#008842;
                    }
                    a:hover{
                        text-decoration: underline;
                    }
                }
                dl{
                    height:91px;
                    float:left;
                    padding:5px 20px 0 15px;
                    dt{
                        h4{
                            padding-left:20px;
                            color:#787878;
                            background:url(../img/header-img.png) no-repeat -174px 5px;
                            height:28px;
                            line-height:28px;
                            font-size:12px;
                        }
                    }
                    dd{
                        line-height:24px;
                        font-size:12px;
                        a{
                            color:#727272;
                            float:left;
                            padding:0 16px 0 20px;
                        }
                    }
                }
                ul{
                    padding-left:15px;
                    float:left;
                    li{
                        height:30px;
                        line-height:30px;
                        color:#008842;
                        padding:0 20px;
                        border:1px solid #fff;
                        border-bottom:1px solid #e0e0e0;
                        float:left;
                    }
                    .list1{
                        padding-top:12px;
                        width:440px;
                        float: left;
                        display:none;
                        .list2{
                            width:100%;
                            em{
                                height:100%;
                                color:#008842;
                                width:25px;
                                float:left;
                                line-height:22px;
                            }
                            strong{
                                float:left;
                                width:415px;
                                a{
                                    display:inline-block;
                                    float:left;
                                    color:#000;
                                    width:83px;
                                    height:22px;
                                    line-height:22px;
                                    font-size:12px;
                                }
                                a:hover{
                                    color:#008842;
                                }
                                .green{
                                    color: #008842;
                                }
                            }
                        }
                    }
                    .list1:nth-of-type(1){
                        display:block;
                    }
                    .showlist{
                        border:1px solid #e0e0e0;
                        border-bottom:1px solid #fff;
                    }
                }
            }
            span:nth-of-type(3):hover{
                color:#fff;
                background:#008842;
                #citylist{
                    display: block;
                }
                i{
                    border-top-color: #fff;
                    transform-origin:4px 2px;
                    transition: all 0.5s;
                    transform:rotate(180deg);
                }
            }   
        }
        #dynamic{
            width:1158px;
            padding:10px 20px;
            h2{
                width:1156px;
                height:40px;
                border:1px solid #ebebeb;
                background:#f1f1f1;
                margin-bottom:10px;
                input{
                    height:14px;
                    width:12px;
                    float:left;
                    margin:15px 20px 0 20px;
                }
                span{
                    float:left;
                    height:40px;
                    color:#262626;
                    line-height:40px;
                    font-size:12px;
                }
                span:nth-of-type(1){
                    margin-right:185px;
                }
                span:nth-of-type(2){
                    margin-right:148px;
                }
                span:nth-of-type(3){
                    margin-right:85px;
                }
                span:nth-of-type(4){
                    margin-right:90px;
                }
                span:nth-of-type(5){
                    margin-right:95px;
                }
                span:nth-of-type(6){
                    margin-right:107px;
                }
                span:nth-of-type(7){
                    margin-right:107px;
                }
            }
            hr{
                height:2px;
                background:#ebebeb;
                border:none;
                margin-bottom:20px;
            }
            h4{
                height:60px;
                width:1158px;
                background:#f7f7f7;
                input{
                    height:12px;
                    width:12px;
                    float:left;
                    margin:22px 6px 0 30px;
                }
                span{
                    height:60px;
                    color:#444444;
                    line-height:60px;
                }
                span:nth-of-type(1){
                    margin-right:43px;
                }
                span:nth-of-type(2){
                    margin-right:24px;
                }
                span:nth-of-type(3){
                    margin-right:532px;
                }
                span:nth-of-type(2):hover,span:nth-of-type(3):hover{
                    color:#008842;
                }
                span:nth-of-type(4){
                    margin-right:10px;
                }
                span:nth-of-type(5){
                    color:#008842;
                    margin-right:5px;
                }
                span:nth-of-type(6){
                    margin-right:24px;
                }
                span:nth-of-type(7){
                    margin-right:12px;
                }
                span:nth-of-type(8){
                    font-size:18px;
                    color:#ff5317;
                }
                span:nth-of-type(9){
                    float:right;
                    margin:10px 11px 0 0;
                    height:38px;
                    width:94px;
                    font-size:18px;
                    color:#fff;
                    text-align:center;
                    line-height:38px;
                    background:#ff5317;
                }
            }
            h3{
                height:105px;
                width:1156px;
                line-height:104px;
                border:1px solid #ebebeb;
                margin-bottom:10px;
                input:nth-of-type(1){
                    height:12px;
                    width:12px;
                    margin:44px 28px 0 20px;
                    float:left;
                }
                img{
                    height:80px;
                    width:80px;
                    border:1px solid #ebebeb;
                    float:left;
                    margin:10px 20px 0 0;
                }
                span:nth-of-type(1){
                    height:105px;
                    width:393px;
                    float:left;
                }
                span:nth-of-type(2){
                    height:105px;
                    width:92px;
                    float:left;
                }
                span:nth-of-type(3){
                    height:22px;
                    width:16px;
                    text-align: center;
                    float:left;
                    margin:37px 4px 0 0;
                    line-height: 22px;
                    border:1px solid #d0d0d0;
                }
                span:nth-of-type(4){
                    height:22px;
                    width:16px;
                    text-align: center;
                    float:left;
                    line-height: 22px;
                    margin:37px 73px 0 4px;
                    border:1px solid #d0d0d0;
                }
                input:nth-of-type(2){
                    height:22px;
                    width:46px;
                    text-align:center;
                    margin-top:37px;
                    border:1px solid #d0d0d0;
                    float:left;
                }
                span:nth-of-type(5){
                    height:105px;
                    width:134px;
                    color:#e93005;
                    float:left;
                }
                span:nth-of-type(7){
                    height:105px;
                    width:77px;
                    float:right;
                }
                span:nth-of-type(7):hover,span:nth-of-type(1):hover{
                    color:#008842;
                }
            }
        }
    }
}
/*--------------footer---------------*/
#footerbox{
    width:100%;
    background:#f7f8f8;
    border-top:1px solid #e0e0e0;
    #footer{
        width:1150px;
        height:363px;
        padding:50px 0 0 50px;
        div{
            float:left;
            width:240px;
            height:190px;
            h3{
                padding-left:40px;
                background:url(../img/footer_icon.png) no-repeat;
                font-size:14px;
                line-height:24px;
                height:24px;
                margin-bottom:14px;
            }
            ul{
                height:110px;
                margin-left:13px;
                border-left:1px dashed #a8a8a8;
                padding-left:20px;
                li{
                    height:22px;
                    line-height:22px;
                    a{
                        color:#000;
                    }
                    a:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
        div:nth-of-type(2){
            h3{
                background-position:0 -23px;
            }
        }
        div:nth-of-type(3){
            h3{
                background-position:0 -46px;
            }
        }
        div:nth-of-type(4){
            h3{
                background-position:0 -69px;
            }
        }
        div:nth-of-type(5){
            h3{
                background-position:0 -92px;
            }
            width:190px;
        }
        h1{
            font-size:14px;
            color:#008842;
            line-height:56px;
            text-align: center;
        }
        h2{
            font-size:12px;
            line-height:22px;
            color:#717171;
            text-align:center;
            a{
                color:#717171;   
            }
        }
        h4{
            text-align: center;
            a{
                display:inline-block;
                vertical-align: middle;
                margin:0 10px;
                img{
                    height:47px;
                }
            }
            a:last-child{
                color:#9393ac;
                line-height:20px;
                img{
                    height:20px;
                }
            }
        }
        a:hover{
            color:#008842;
        }
    }
}
#fixed{
    position:fixed;
    bottom:30px;
    right:13px;
    z-index:50;
    div{
        height:42px;
        width:50px;
        margin-top:10px;
        background:url(../img/sidebar.png) no-repeat;
    }
    div:nth-of-type(1){
        background-position:0 -46px;
    }
    div:nth-of-type(2){
        background-position:0 0px;
        display:none;
    }
    div:nth-of-type(1):hover{
        background-position:-56px -46px;
    }
    div:nth-of-type(2):hover{
        background-position:-56px 0;
    }
}
